<template>
  <div class="reg">
    <div class="bannerbox clmstart">
      <div class="navbox">
        <div class="navcontbox maxw">
          <img
            src="../assets/img/logo2.png"
            class="logo2"
            @click="$router.push('/index')"
          />
        </div>
      </div>
      <div class="banner">
        <p class="p1">2023 <span>GREATER</span> CHINA HUMAN RESOURCES CONFERENCE</p>
        <p class="p2">
          THE RITZ-CARLTON & RENAISSANCE HAIKOU<br />
          NOVEMBER 27-30, 2023
        </p>
      </div>
    </div>
    <!-- welcome -->
    <div class="wtitle">Be connected. Be courageous. Be the future.</div>
    <!--  -->
    <Already v-show="already" @alreadyto="AlreadyTo" />
    <!-- 具体步骤 -->
    <Step1 v-show="step1" @step1ToStep2="step1goStep2" />
    <Step2
      v-show="step2"
      @step2ToStep1="step2goStep1"
      @step2ToStep3="step2goStep3"
    />
    <Step3 v-show="step3" />
    <Footer />
  </div>
</template>
<script>
import Footer from "@/components/Footer.vue";
import Already from "./Already.vue";
import Step1 from "./Step1.vue";
import Step2 from "./Step2.vue";
import Step3 from "./Step3.vue";
export default {
  data() {
    return {
      // active: 0,
      already: false,
      step1: false,
      step2: false,
      step3: false,
    };
  },
  mounted() {
    let from = this.$route.query.from;
    if (from == "already") {
      this.step1 = false;
      this.step3 = false;
      this.already = true;
    } else if (from == "topay") {
      this.step1 = false;
      this.already = false;
      this.step3 = true;
    } else {
      this.already = false;
      this.step3 = false;
      this.step1 = true;
    }
  },
  methods: {
    //
    step2goStep1() {
      window.scrollTo(0, 0);
      this.step2 = false;
      this.step1 = true;
    },
    //
    step1goStep2() {
      window.scrollTo(0, 0);
      this.step1 = false;
      this.step2 = true;
    },
    //
    step2goStep3() {
      window.scrollTo(0, 0);
      this.step2 = false;
      this.step3 = true;
    },
    //
    AlreadyTo() {
      window.scrollTo(0, 0);
      this.already = false;
      this.step1 = true;
    },
  },
  components: { Footer, Step1, Step2, Step3, Already },
};
</script>
<style lang="less" scoped>
.reg {
  .bannerbox {
    width: 100%;
    .navbox {
      width: 100%;
      padding: 1.5625rem 0;
      .navcontbox {
        position: relative;
        max-width: 85%;
        margin: auto;
        text-align: right;
        .logo2 {
          max-width: 9.3%;
          padding-right: 0.94rem;
          cursor: pointer;
        }
      }
    }
    // 头图
    .banner {
      position: relative;
      width: 100%;
      // height: 316px;
      background: url("../assets/img/banner.jpg") no-repeat top center;
      background-size: cover;
      p {
        text-align: center;
        color: #ffffff;
        line-height: 1.2;
        span {
          font-family: "RidleyBold";
        }
      }
      .p1 {
        font-size: 2.5rem;
        padding-top: 6rem;
      }
      .p2 {
        font-size: 1.9rem;
        padding: 2rem 0 2.5rem 0;
      }
    }
  }
  //welcome
  .wtitle {
    font-family: "RidleyBold";
    color: #ffffff;
    width: 100%;
    text-align: center;
    font-size: 2.8rem;
    background: #f18f61;
  }
}
@media only screen and (max-width: 600px) {
  .reg {
    .bannerbox {
      .navbox {
        .navcontbox {
          .logo2 {
            max-width: 30%;
          }
        }
      }
      .banner {
        .p1 {
          font-size: 1.8rem;
          padding-top: 4rem;
        }
        .p2 {
          font-size: 1rem;
          padding: 2rem 0 2.5rem 0;
        }
      }
    }
    .wtitle {
      font-size: 1.2rem;
    }
  }
}
</style>
